 import {Card,Input,DatePicker,Button,Upload,Image} from 'antd'
 import SelectTag from './SelectTag';
 import SelectShop from './SelectShop';
 const {RangePicker} = DatePicker
 import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { useState } from 'react';


function AddInfo(props:any) {
  const [tag,setTag] = useState({pic:'',id:null})
  const {info,setInfo} = props;
  // 是否显示选择tag组件
  const [showSelTag,setShowSelTag] = useState(false)
  // 是否显示选择店铺
  const [showSelShop,setShowSelShop] = useState(false)
  // 显示店铺
  const [shops,setShops] = useState<any>([]);
  
  // 处理上传组件的变化
  const handleChange: UploadProps['onChange'] = (infos: UploadChangeParam<UploadFile>) => {
    // 如果状态是done
    if (infos.file.status === 'done') {
      // 更新了info的banner值
      const banner = 'http://dida100.com:8888'+infos.file.response.file.path;
      setInfo({...info,banner})
     }
  }
 

  return ( <div>
    <Card type='inner' title="团购信息">
      <div>
        <span className="lable">团购名称</span>
        <Input value={info.name} onChange={(e:any)=>setInfo({...info,name:e.target.value})} />
      </div>
      <div>
        <span className="lable">团购时间</span>
        <RangePicker format="YYYY-MM-DD HH:mm:ss" onChange={(arrDate,arrString)=>{
          console.log(arrString);
          setInfo({...info,startTime:arrString[0],endTime:arrString[1]})
        }}/>
      </div>
      <div>
        <span className="label">活动banner</span>
        {/* name要与接口一致 必须是file */}
        <Upload
        name="file"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        // 接口地址
        action="http://dida100.com:8888/api/file/upload"
        
        onChange={handleChange}
      >
        {info.banner ? <img src={info.banner} alt="avatar" style={{ width: '100%',objectFit:'cover',height:'100%' }} /> : <Button>上传</Button>}
      </Upload>
      </div>
      <div>
        <span className='label'>选择标签:</span>
        {tag.pic&&<Image src={tag.pic} width={48}/>}
        <Button onClick={()=>setShowSelTag(true)}>选择</Button>
      </div>
      <div>
        <span className='label'>选择店铺:</span>
        <span>{shops.map((item:any)=>item.name).join(',')}</span>
        
        <Button onClick={()=>setShowSelShop(true)}>选择</Button>
      </div>
    </Card>
    {JSON.stringify(info)}
    {showSelTag&&<SelectTag onCancel={()=>setShowSelTag(false)}  onOk={(row:any)=>{
      console.log("选择的row",row);
      setShowSelTag(false);
      setTag({...row})
      setInfo({...info,tag:row.id})
    }}/>}
    {showSelShop&&<SelectShop 
    onCancel={()=> setShowSelShop(false)}
    onOk={(rows:any)=>{
      setShowSelShop(false);
      setShops(rows)
      // 更新info.shop 把id返回用字符串连接
      setInfo({...info,shop:rows.map((item:any)=>item.id).join(',')})
    }}/>}
    <Button type='primary' onClick={()=>props.setCurrent(props.current+1)}>下一步,选择商品</Button>
    </div> );
}

export default AddInfo;